Yola Step-by Step Tutorial




Lending. Supporting. Inspiring.
Before Beginning

                        Some prerequisites:

                        • Email Account

                        • Marketing Plan

                        • Site-specific content

                               • Pictures

                               • Product Descriptions

                               • Contact Information




www.accionusa.org   2
Step 1. Site Goals

• Before you even start thinking about building a
  website, you have to do some soul searching
    – Why do you want to make a website?

    – What is the purpose of your website?

    – Who will visit your website?

    – What will they gain?

    – What is in it for you?
• Writing the answers down will help focus you through
  this journey


www.accionusa.org              3
Step 1. Story

Sample story:

• Thomas and Jan are two hometown friends that opened a
  small local bakery about a year ago

• Their breads are made from a secret recipe passed down from
  Jan’s grandmother and are hailed by locals as the best kept
  secret in the area

• Still, their customer base (and profits) have stayed steady for
  months and they are looking for ways to expand without
  adding more branches




www.accionusa.org            4
Step 1. Site Goals

• Start in ‘expansion’ mode

    – Brainstorm – spend some quality time thinking about your goals

    – No idea is ‘too-big’ or ‘too-hard’ yet

    – Write down everything

• End in ‘strategic’ mode

    – What will help me attract clients? Increase revenue?

    – What are the resources I have? How long will it take to carry
      out my goals?


www.accionusa.org                5
Step 1. Page by Page Site Plan

• Draw out a page by page design of your site
    – What pages do you want to show? Site name?
    – How will links work? Where will text and pictures go? Where
      do we incorporate widgets?




www.accionusa.org            6
Step 2. Create Your Account

• Using your preferred email address, go to Yola.com
  and create an account

• Choose the ‘Yola free’ option




www.accionusa.org       7
Step 2. Choose a Style

• With so many options, it is easy to get lost here

• Choose a free style to best represents the image you
  want to convey. Additionally, you can purchase
  Premium styles



 Once you have picked out the right
 style for you, click the preview
 button to view sample content




www.accionusa.org                     8
Step 2. Confirm your style

• Click              to confirm your style

• You will need to choose a name for your site. Let’s
  “Build Our Site” now, we’ll come back to the site
  name.




www.accionusa.org        9
Step 3. Build Your Site

• Since we spent time on our site plan, building the
  website with Yola can be fun and easy!

• We’ll build one page at a time, utilizing some different
  tools.

• Afterwards we will incorporate our widgets and
  publish our site




www.accionusa.org         10
Step 3. Main Page

• Most important page in your site

• Customers will come to a decision about whether to
  stay based on how your site looks.

• Its important to look to your marketing plan for
  guidance on your strengths. Emphasize them here.




www.accionusa.org       11
Step 3. Drag and Drop

• Drag and drop a text
  box from your content
  sidebar

• Place it in the center of
  the page




www.accionusa.org         12
Step 3. Adding Text




• Put in your mission statement. This is a the main
  message you want your users to read. It should entice
  the user to stay.

• You can format this text to give emphasis to certain
  words




www.accionusa.org        13
Step 3. Adding Pictures

• Drag and drop the ‘Picture’ widget

• Upload pictures from your computer to the website

• You get 1GB of space for images and content.




www.accionusa.org       14
Step 3. Combining Content Widgets

• You’ll begin to see how we can build an enticing site
  piece by piece, easily.




www.accionusa.org        15
Step 3. About Us

• For the sample site, we will emphasize our business
  image by describing our history and our values

• Let’s drag another text widget below the picture
  widget we just added.




www.accionusa.org        16
Step 3. Additional Content

• This text is less pronounced than our mission
  statement. However, we highlight keywords.




www.accionusa.org       17
Step 3. Adding Pages

• Following our site plan, we can add some new pages
  to guide the user to different types of information
  about our business




• Add a new web page
  and name it




www.accionusa.org      18
Step 3. Columns

• One useful way to organize your site is by using
  columns.

• This will separate content into two sections on your
  site.

• Here we will put product pictures on one side and
  descriptions on the other.




www.accionusa.org        19
Step 3. Content in Columns


• Drag and drop the column divider into the site




• Then, use the text and picture components to populate the
  columns with data

• You can put columns inside columns, and stack them for
  effect

www.accionusa.org          20
Step 3. Utilizing Columns




www.accionusa.org    21
Step 3. Adding Widgets

• Our site plan calls for putting a map on our contact
  page.

• The way to do this is to incorporate widgets into our
  website

• A widget takes up minimal space on your website and
  allows you to customize a popular tool, such as
  Google Maps or PayPal, to your business

• For our map, we will be using Google Maps



www.accionusa.org        22
Step 3. Adding Widgets

• Common widgets can be found in the
  content sidebar

• Each needs different inputs

• Many require you to sign-up on
  partner sites to utilize them




www.accionusa.org       23
Step 3. Adding Widgets

• Add an address and search to focus the map to your
  location




• Helps customers find you


www.accionusa.org         24
Step 3. Adding Widgets

• Some widgets provide specialized services that can help you
  enhance the user experience

• For our sample site, we’ll use

    Social Media Badge – Spread the word through different outlets

    Google Translator – Accommodate different users

    PayPal – Increase revenue

    Easy Comments – Allow users to comment on your site




www.accionusa.org               25
Step 3. Adding Widgets

• Some widgets can be added with minimal additional
  info required




www.accionusa.org      26
Step 3. Adding Widgets

• Some widgets, like PayPal, require you to have
  accounts created on the parent site

• PayPal is a useful and secure server that you should
  consider to enable online purchases




www.accionusa.org       27
Step 3. Adding Widgets

• Some widgets, like Easy Comments, will look sparse
  when you add them in the site editor

• Users will add content to these widgets when you go
  live with your site




www.accionusa.org       28
Review our Progress

• Let’s review our progress

• Publish your site by hitting “Update my Site”




• We’ll switch over to a Yola-created website:
  http://brooklynsamplebakery.yolasite.com/




www.accionusa.org        29
Advanced Topics

• Check out the Yola website for information on more
  advanced topics

    http://www.yola.com/support.html

    - Some topics worth checking out:

        - Getting your own domain name

        - Analytics and Optimization

        - Picture Galleries

        - Linking to PayPal and other merchant tools



www.accionusa.org                 30
Questions?




www.accionusa.org      31

Build a website using Yola by ACCION USA

  • 1.
    Yola Step-by StepTutorial Lending. Supporting. Inspiring.
  • 2.
    Before Beginning Some prerequisites: • Email Account • Marketing Plan • Site-specific content • Pictures • Product Descriptions • Contact Information www.accionusa.org 2
  • 3.
    Step 1. SiteGoals • Before you even start thinking about building a website, you have to do some soul searching – Why do you want to make a website? – What is the purpose of your website? – Who will visit your website? – What will they gain? – What is in it for you? • Writing the answers down will help focus you through this journey www.accionusa.org 3
  • 4.
    Step 1. Story Samplestory: • Thomas and Jan are two hometown friends that opened a small local bakery about a year ago • Their breads are made from a secret recipe passed down from Jan’s grandmother and are hailed by locals as the best kept secret in the area • Still, their customer base (and profits) have stayed steady for months and they are looking for ways to expand without adding more branches www.accionusa.org 4
  • 5.
    Step 1. SiteGoals • Start in ‘expansion’ mode – Brainstorm – spend some quality time thinking about your goals – No idea is ‘too-big’ or ‘too-hard’ yet – Write down everything • End in ‘strategic’ mode – What will help me attract clients? Increase revenue? – What are the resources I have? How long will it take to carry out my goals? www.accionusa.org 5
  • 6.
    Step 1. Pageby Page Site Plan • Draw out a page by page design of your site – What pages do you want to show? Site name? – How will links work? Where will text and pictures go? Where do we incorporate widgets? www.accionusa.org 6
  • 7.
    Step 2. CreateYour Account • Using your preferred email address, go to Yola.com and create an account • Choose the ‘Yola free’ option www.accionusa.org 7
  • 8.
    Step 2. Choosea Style • With so many options, it is easy to get lost here • Choose a free style to best represents the image you want to convey. Additionally, you can purchase Premium styles Once you have picked out the right style for you, click the preview button to view sample content www.accionusa.org 8
  • 9.
    Step 2. Confirmyour style • Click to confirm your style • You will need to choose a name for your site. Let’s “Build Our Site” now, we’ll come back to the site name. www.accionusa.org 9
  • 10.
    Step 3. BuildYour Site • Since we spent time on our site plan, building the website with Yola can be fun and easy! • We’ll build one page at a time, utilizing some different tools. • Afterwards we will incorporate our widgets and publish our site www.accionusa.org 10
  • 11.
    Step 3. MainPage • Most important page in your site • Customers will come to a decision about whether to stay based on how your site looks. • Its important to look to your marketing plan for guidance on your strengths. Emphasize them here. www.accionusa.org 11
  • 12.
    Step 3. Dragand Drop • Drag and drop a text box from your content sidebar • Place it in the center of the page www.accionusa.org 12
  • 13.
    Step 3. AddingText • Put in your mission statement. This is a the main message you want your users to read. It should entice the user to stay. • You can format this text to give emphasis to certain words www.accionusa.org 13
  • 14.
    Step 3. AddingPictures • Drag and drop the ‘Picture’ widget • Upload pictures from your computer to the website • You get 1GB of space for images and content. www.accionusa.org 14
  • 15.
    Step 3. CombiningContent Widgets • You’ll begin to see how we can build an enticing site piece by piece, easily. www.accionusa.org 15
  • 16.
    Step 3. AboutUs • For the sample site, we will emphasize our business image by describing our history and our values • Let’s drag another text widget below the picture widget we just added. www.accionusa.org 16
  • 17.
    Step 3. AdditionalContent • This text is less pronounced than our mission statement. However, we highlight keywords. www.accionusa.org 17
  • 18.
    Step 3. AddingPages • Following our site plan, we can add some new pages to guide the user to different types of information about our business • Add a new web page and name it www.accionusa.org 18
  • 19.
    Step 3. Columns •One useful way to organize your site is by using columns. • This will separate content into two sections on your site. • Here we will put product pictures on one side and descriptions on the other. www.accionusa.org 19
  • 20.
    Step 3. Contentin Columns • Drag and drop the column divider into the site • Then, use the text and picture components to populate the columns with data • You can put columns inside columns, and stack them for effect www.accionusa.org 20
  • 21.
    Step 3. UtilizingColumns www.accionusa.org 21
  • 22.
    Step 3. AddingWidgets • Our site plan calls for putting a map on our contact page. • The way to do this is to incorporate widgets into our website • A widget takes up minimal space on your website and allows you to customize a popular tool, such as Google Maps or PayPal, to your business • For our map, we will be using Google Maps www.accionusa.org 22
  • 23.
    Step 3. AddingWidgets • Common widgets can be found in the content sidebar • Each needs different inputs • Many require you to sign-up on partner sites to utilize them www.accionusa.org 23
  • 24.
    Step 3. AddingWidgets • Add an address and search to focus the map to your location • Helps customers find you www.accionusa.org 24
  • 25.
    Step 3. AddingWidgets • Some widgets provide specialized services that can help you enhance the user experience • For our sample site, we’ll use Social Media Badge – Spread the word through different outlets Google Translator – Accommodate different users PayPal – Increase revenue Easy Comments – Allow users to comment on your site www.accionusa.org 25
  • 26.
    Step 3. AddingWidgets • Some widgets can be added with minimal additional info required www.accionusa.org 26
  • 27.
    Step 3. AddingWidgets • Some widgets, like PayPal, require you to have accounts created on the parent site • PayPal is a useful and secure server that you should consider to enable online purchases www.accionusa.org 27
  • 28.
    Step 3. AddingWidgets • Some widgets, like Easy Comments, will look sparse when you add them in the site editor • Users will add content to these widgets when you go live with your site www.accionusa.org 28
  • 29.
    Review our Progress •Let’s review our progress • Publish your site by hitting “Update my Site” • We’ll switch over to a Yola-created website: http://brooklynsamplebakery.yolasite.com/ www.accionusa.org 29
  • 30.
    Advanced Topics • Checkout the Yola website for information on more advanced topics http://www.yola.com/support.html - Some topics worth checking out: - Getting your own domain name - Analytics and Optimization - Picture Galleries - Linking to PayPal and other merchant tools www.accionusa.org 30
  • 31.